<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/hairDetails.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/hairDetails.js"></script>

    <title>发型师详情</title>
</head>

<body>
    <div class="hair_details_3Q">
        <!-- 发型师基本介绍 -->
        <div class="brief_introduction">
            <div class="brief_empty"></div>
            <div class="brief_main">
                <img class="brief_main-img" src="" alt="">
                <div class="brief_main-details">
                    <div class="brief_main_top">
                        <text class="brief_main_name">Gilbert</text>
                        <text class="brief_main_experience">6年工作经验</text>
                        <text class="brief_main_price">
                            <span>￥</span>39</text>
                    </div>
                    <div class="brief_main_middle">
                        有2位顾客在等待
                    </div>
                    <div class="brief_main_btn" id="takenum-btn">一键取号</div>
                </div>
            </div>
        </div>

        <!-- 地址 -->
        <div class="hair_address">
            <div class="dian">店</div>
            <text>武汉市 江汉区 武汉商务区地铁站匠心汇B18-7商铺</text>
            <div class="add_right">></div>
        </div>

        <!-- 评分模块 -->
        <div class="grade">
            <div class="store_grade">
                <div class="grade_top">4.7</div>
                <div class="grade_bottom">店铺评分</div>
            </div>
            <div class="grade_center"></div>
            <div class="takepartin_grade">
                <div class="grade_top">270
                    <span>人</span>
                </div>
                <div class="grade_bottom">参与评分</div>
            </div>
        </div>

        <!-- 顾客评价 -->
        <div class="evaluate">
            <div class="evaluate_title">顾客评价</div>
            <div class="evaluate_label">
                <div class="eval_label_eval">技艺精湛</div>
                <div class="eval_label_eval">服务周到</div>
                <div class="eval_label_eval">超级大忙人</div>
                <div class="eval_label_eval">很难预约</div>
                <div class="eval_label_eval">活好不粘人</div>
                <div class="eval_label_eval">明明可以靠脸</div>
            </div>
        </div>

        <!-- 工作经历 -->
        <div class="experience">
            <div class="evaluate_title">工作经历</div>
            <div class="exper_content">
                <div class="exper_through">
                    <div class="exper_line">
                        <div class="line1"></div>
                        <img class="circle" src="images/experience.png"></img>
                        <div class="line2"></div>
                    </div>
                    <div class="exper_text">
                        <p class="exper_post">发源地·创意总监</p>
                        <p class="exper_period">在职时间：2000-01-13~2016-12-21</p>
                    </div>
                </div>
                <div class="exper_through">
                    <div class="exper_line">
                        <div class="line1"></div>
                        <img class="circle" src="images/experience.png"></img>
                        <div class="line2"></div>
                    </div>
                    <div class="exper_text">
                        <p class="exper_post">发源地·创意总监</p>
                        <p class="exper_period">在职时间：2000-01-13~2016-12-21</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 自定义位置弹出层 -->
    <div id="div"></div>
    <div id="popover" class="mui-popover" style="height: 250px;">
        <div class="mui-popover-arrow"></div>
        <div class="mui_popover-content">
            <div class="popover_title">
                <text class="popover_title-text">一键取号
                    <img class="popover_title-img" src="images/detele.png" alt="">
                </text>
            </div>
            <div class="popover_price">
                <div class="popover_price-num">
                    <span>￥</span>39 </div>
                <div class="popover_hairname"> Gilbert</div>
            </div>
            <div class="popover_hint">请安排好时间及时到店</div>
            <button class="popover_btn" id="comfirm_takenum">确认取号</button>
        </div>
    </div>
</body>

</html>